import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Flex, Segmented } from 'antd';
const App = () => (
    <Flex gap="small" align="flex-start" vertical>
        <Segmented
            options={[
                {
                    label: (
                        <div
                            style={{
                                padding: 4,
                            }}
                        >
                            <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
                            <div>User 1</div>
                        </div>
                    ),
                    value: 'user1',
                },
                {
                    label: (
                        <div
                            style={{
                                padding: 4,
                            }}
                        >
                            <Avatar
                                style={{
                                    backgroundColor: '#f56a00',
                                }}
                            >
                                K
                            </Avatar>
                            <div>User 2</div>
                        </div>
                    ),
                    value: 'user2',
                },
                {
                    label: (
                        <div
                            style={{
                                padding: 4,
                            }}
                        >
                            <Avatar
                                style={{
                                    backgroundColor: '#87d068',
                                }}
                                icon={<UserOutlined />}
                            />
                            <div>User 3</div>
                        </div>
                    ),
                    value: 'user3',
                },
            ]}
        />
        <Segmented
            options={[
                {
                    label: (
                        <div
                            style={{
                                padding: 4,
                            }}
                        >
                            <div>Spring</div>
                            <div>Jan-Mar</div>
                        </div>
                    ),
                    value: 'spring',
                },
                {
                    label: (
                        <div
                            style={{
                                padding: 4,
                            }}
                        >
                            <div>Summer</div>
                            <div>Apr-Jun</div>
                        </div>
                    ),
                    value: 'summer',
                },
                {
                    label: (
                        <div
                            style={{
                                padding: 4,
                            }}
                        >
                            <div>Autumn</div>
                            <div>Jul-Sept</div>
                        </div>
                    ),
                    value: 'autumn',
                },
                {
                    label: (
                        <div
                            style={{
                                padding: 4,
                            }}
                        >
                            <div>Winter</div>
                            <div>Oct-Dec</div>
                        </div>
                    ),
                    value: 'winter',
                },
            ]}
        />
    </Flex>
);
export default App;